<template>
	<div class="mine-my-team-wrap">
		<van-nav-bar title="我的团队" left-arrow fixed @click-left="onClickLeft" />
		
		<div class="team-invite" v-if="inviter.inviter_show==1">
			<div class="team-invite-title">我的推荐人</div>
			<div class="team-invite-desc" >
				<img v-if="inviter_info.avatar_url" class="team-invite-head" :src="inviter_info.avatar_url" alt="">
				<img v-else class="team-invite-head" src="../../images/mine/head.png" >
				<div class="team-invite-name" >{{inviter_info.nickname}}</div>
			</div>
		</div>
		
		<div class="profit_core" v-if="inviter.level_info && inviter.level_info.items.length > 0">
			<div class="profit_team">
				<div class="profit_team_left">
					<div 
					v-for="(item, index) in inviter.level_info.items" 
					:key="index" 
					class="profit_team_left_item">
						<div class="profit_team_left_title">{{ item.title }}</div>
						<van-progress :percentage="calculatePercentage(item.req_val, item.now_val)" stroke-width="6px"
							pivot-text="" pivot-color="#7232dd" color="linear-gradient(to left, #FFC100, #FFFC82)" />
						<div class="profit_team_left_title right">{{ item.desc }}</div>
					</div>
				</div>
				<div class="profit_team_right">
					<img :src="inviter.level_info.icon" alt="" />
					<div>{{ inviter.level_info.name }}</div>
				</div>
			</div>
			
			<div class="profit_team_tip">{{inviter.level_info.tip_msg}}</div>
		</div>
		
		<!-- 团队粉丝 -->
		<div 
		v-if="inviter.statistics"
		class="team-fensi" 
		@click="handleToTeam()"
		>
			<div class="team-fensi-tltle" >团队粉丝</div>
			<div class="team-fensi-count" >{{ inviter.statistics.count }}</div>
			<div class="team-fensi-ul" >
				<div
				@click.stop="handleToTeam('yesterday')"
				 class="team-fensi-li" >
					<div class="team-fensi-val" >{{ inviter.statistics.days_count1 }}</div>
					<div class="team-fensi-label" >昨日新增</div>
				</div>
				<div 
				@click.stop="handleToTeam('week')"
				class="team-fensi-li li-center" >
					<div class="team-fensi-val" >{{ inviter.statistics.days_count7 }}</div>
					<div class="team-fensi-label" >近7天</div>
				</div>
				<div 
				@click.stop="handleToTeam('month')"
				class="team-fensi-li" >
					<div class="team-fensi-val" >{{ inviter.statistics.days_count30 }}</div>
					<div class="team-fensi-label" >近30天</div>
				</div>
			</div>
			
			<div 
			@click.stop="handleToTeam('today')"
			class="today-btn" >今日新增 {{ inviter.statistics.today_count }}</div>
			
		</div>
		
		<div class="team-static" >
			<div class="team-static-title" >
				<img class="team-static-title-icon" src="../../images/mine/icon_shuju.png" />
				<div class="team-static-title-text" >团队数据汇总</div>
			</div>
			<div class="team-static-ul" >
				<div class="team-static-li" >
					<div class="team-static-li-val" >{{ inviter.statistics.tier_count1 }}</div>
					<div class="team-static-li-label" >直属粉丝</div>
				</div>
				<div class="team-static-li" >
					<div class="team-static-li-val" >{{ inviter.statistics.tier_count2 }}</div>
					<div class="team-static-li-label" >二代粉丝</div>
				</div>
				<div class="team-static-li" >
					<div class="team-static-li-val" >{{ inviter.statistics.tier_count_other }}</div>
					<div class="team-static-li-label" >二代后粉丝</div>
				</div>
			</div>
		</div>
		
		
			
			
		<!-- 	<div class="profit_core_title">我的直推({{ total_count }}人)</div>
			<div>
				<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
					<div class="team_list" v-for="(item, index) in fansList" :key="index">
						<div class="team_list_item">
							<img v-if="item.avatar_url" :src="item.avatar_url" alt="" />
							<img v-else src="../../images/mine/head.png" alt="" />
							<div class="team_list_item_info">
								<div>{{ item.nickname }}</div>
								<div>
									消费金额：{{ item.consume_total }}&nbsp;&nbsp;团队人数：{{
                    item.team_count
                  }}
								</div>
							</div>
							<div class="team_list_item_level">经理</div>
							<img v-if="item.level_icon" class="team_list_item_level" :src="item.level_icon || ''"
								alt="" />
							<div v-else class="team_list_item_level"></div>
						</div>
					</div>
				</van-list>
			</div> -->
			
			
		</div>
	<!-- </div> -->
</template>
<script>
	import {
		TEAM_INFO,
		FANS_LIST
	} from "@/api/mine";
	export default {
		data() {
			return {
				finished: false,
				loading: false,
				inviter_info: {},
				page: 1,
				pageSize: 20,
				fansList: [],
				total_count: 0,
				currentValidUsers: 2.2, // 当前有效用户数量（单位：万）
				totalValidUsers: 5, // 总有效用户数量（单位：万）
				currentValidTeam: 2.3,
				totalValidTeam: 6,
				inviter: {},
			};
		},
		mounted() {
			window.scrollTo(0, 0);
			this.$http(TEAM_INFO).then((res) => {
				this.inviter = res.data;
				this.inviter_info = res.data.inviter_info;
			});
		},
		methods: {
			onClickLeft() {
				this.$router.back();
			},
			calculatePercentage(reqVal, nowVal) {
				if (nowVal >= reqVal) {
					return 100; // 如果当前值大于或等于最高值，返回 100%
				}
				// 计算进度百分比
				const progress = (nowVal / reqVal) * 100; // 这里 nowVal 是当前值，reqVal 是最高值
				// 确保进度在 0 到 100 之间
				return Math.max(0, Math.min(100, progress));
			},
			// 列表
			handleToTeam(name) {
				this.$router.push({
					name: 'teamList',
					query:{
						name: name || ''
					}
				})
			},
			
			
			onLoad() {
				let params = {};
				params["page_num"] = this.page;
				params["page_size"] = this.pageSize;
				// params['status'] = this.active;
				this.$http.get(FANS_LIST, {
					params: params
				}).then((res) => {
					const {
						list
					} = res.data;
					this.total_count = res.data.pages.total_count;
					if (list && list.length) {
						this.page++;
						this.fansList = this.fansList.concat(list);

						// 加载状态结束
						this.loading = false;
						if (list.length < this.pageSize) {
							this.finished = true;
						}
					} else {
						this.finished = true;
					}
				});
			},
		},
	};
</script>
<style lang="scss">
	.mine-my-team-wrap {
		min-height: 100vh;
		padding-top: 58px;
		padding-bottom: 1rem;
		background-color: #f4f4f4;
		box-sizing: border-box;
		.van-nav-bar .van-icon{
			color: #333333;
		}
		.van-nav-bar__arrow{
			font-size: 20px;
		}
		.van-hairline--bottom::after{
		    display: none;
		}
		.team-invite{
			width: 7.02rem;
			height: 1.68rem;
			padding: 0.24rem 0.32rem;
			margin: auto;
			margin-bottom: 0.2rem;
			border-radius: 0.16rem;
			box-sizing: border-box;
			background-color: #FFFFFF;
			.team-invite-title{
				height: 0.4rem;
				margin-bottom: 0.1rem;
				line-height: 0.4rem;
				font-size: 0.28rem;
				font-weight: 500;
				color: #333333;
			}
			.team-invite-desc{
				display: flex;
				align-items: center;
				.team-invite-head{
					width: 0.72rem;
					height: 0.72rem;
					margin-left: 0.14rem;
					margin-right: 0.18rem;
				}
				.team-invite-name{
					font-size: 0.28rem;
					color: #333333;
				}
			}
		}
		
		.profit_core{
			width: 7.02rem;
			margin: auto;
			margin-bottom: 0.2rem;
			padding: 0.2rem 0.28rem 0.32rem 0.32rem;
			background: linear-gradient( 117deg, #F62B23 0%, #F26554 100%);
			border-radius: 0.16rem;
			box-sizing: border-box;
			.profit_team{
				display: flex;
				justify-content: space-between;
				.profit_team_left{
					width: 3.82rem;
					margin-top: 0.24rem;
					font-size: 0.24rem;
					color: #FFFFFF;
					.profit_team_left_item{
						margin-bottom: 0.24rem;
					}
					.profit_team_left_title{
						height: 0.34rem;
						font-weight: 400;
						line-height: 0.34rem;
						margin-bottom: 0.08rem;
						&.right{
							margin-top: 0.08rem;
							text-align: right;
						}
					}
				}
				.profit_team_right{
					img{
						display: block;
						height: 1.82rem;
					}
					div{
						height: 0.4rem;
						margin-top: 0.06rem;
						line-height: 0.4rem;
						font-weight: 500;
						font-size: 0.28rem;
						text-align: center;
						color: #FFFFFF;
					}
				}
			}
			.profit_team_tip{
				line-height: 0.34rem;
				font-weight: 400;
				font-size: 0.24rem;
				margin-top: 0.24rem;
				color: #FFFFFF;
				opacity: 0.8;
				white-space:pre-wrap;
			}
		}
		
		.team-fensi{
			position: relative;
			width: 7.02rem;
			height: 2.84rem;
			padding: 0.3rem 0;
			margin: auto;
			margin-bottom: 0.2rem;
			color: #FFFFFF;
			background: url(../../images/mine/mine-team-bg.png) no-repeat center;
			background-size: cover!important;
			box-sizing: border-box;
			.today-btn{
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0.52rem;
				right: 0.4rem;
				height: 0.6rem;
				padding: 0 0.24rem;
				font-size: 0.28rem;
				color: #333333;
				border-radius: 0.3rem;
				background-color: #FFFFFF;
			}
			.team-fensi-tltle{
				height: 0.4rem;
				margin-left: 0.48rem;
				margin-bottom: 0.08rem;
				line-height: 0.4rem;
				font-size: 0.28rem;
				font-weight: 400;
				color: #FFFFFF;
			}
			.team-fensi-count{
				height: 0.74rem;
				margin-left: 0.48rem;
				margin-bottom: 0.14rem;
				line-height: 0.74rem;
				font-weight: 500;
				font-size: 0.52rem;
				color: #FFFFFF;
			}
			.team-fensi-ul{
				display: flex;
				justify-content: space-between;
				.team-fensi-li{
					flex: 1;
					text-align: center;
					&.li-center{
						position: relative;
						&::before{
							position: absolute;
							left: 0;
							top: 0;
							bottom: 0;
							margin: auto;
							content: '';
							width: 0.02rem;
							height: 0.5rem;
							background: rgba(255,255,255,0.2);
						}
						&::after{
							position: absolute;
							right: 0;
							top: 0;
							bottom: 0;
							margin: auto;
							content: '';
							width: 0.02rem;
							height: 0.5rem;
							background: rgba(255,255,255,0.2);
						}
					}
					.team-fensi-val{
						height: 0.44rem;
						margin-bottom: 0.08rem;
						line-height: 0.44rem;
						font-weight: 500;
						font-size: 0.32rem;
					}
					.team-fensi-label{
						font-weight: 400;
						font-size: 0.24rem;
						opacity: 0.8;
					}
				}
			}
		}
		
		.team-static{
			width: 7.02rem;
			height: 2.52rem;
			margin: auto;
			border-radius: 0.16rem;
			background-color: #FFFFFF;
			overflow: hidden;
			.team-static-title{
				display: flex;
				align-items: center;
				height: 0.72rem;
				padding: 0 0.24rem;
				box-sizing: border-box;
				background-color: rgba(243, 42, 35, 0.1);
				.team-static-title-icon{
					width: 0.32rem;
					height: 0.32rem;
					margin-right: 0.16rem;
				}
				.team-static-title-text{
					font-size: 0.28rem;
					font-weight: 500;
					color: #333333;
				}
			}
			.team-static-ul{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.team-static-li{
					flex: 1;
					margin-top: 0.4rem;
					text-align: center;
					.team-static-li-val{
						height: 0.44rem;
						margin-bottom: 0.16rem;
						line-height: 0.44rem;
						font-size: 0.32rem;
						font-weight: 500;
						color: #333333;
					}
					.team-static-li-label{
						height: 0.4rem;
						line-height: 0.4rem;
						font-size: 0.28rem;
						color: #666666;
					}
				}
			}
		}

	
	}
</style>
